<template>
	<view class="container">
		<view>
			<text>button样式 size type</text>

			<scroll-view scroll-y="true">
				<button size="default" type="primary">按钮 size default</button>
				<button size="mini" type="primary">按钮 size mini</button>

				<button size="default" type="primary">按钮type primary</button>
				<button size="default" type="warn">按钮type warn</button>
				<button class="btn" hover-class="is-hover">按钮自定义样式</button>
			</scroll-view>
		</view>


		<view>
			<text>button点击跳转页面</text>
			<scroll-view scroll-y="true">
				<navigator url="/pages/lifecycle-detail/index">
					<button type="primary">通过navigator组件跳转到其他页面</button>
				</navigator>
				<button type="primary"
					@click="navigateTo('/pages/lifecycle-detail/index', $event)">通过uni.navigateTo方法跳转到其他页面</button>
				<!-- 这种写法只有h5平台支持，不跨端，不推荐使用 -->
				<button type="primary" @click="goto('/pages/home/home', $event)">通过uni.switchTab方法跳转到跳转tabBar页面</button>
			</scroll-view>
		</view>

		<view class="end">
			<text>button open-type</text>
			<scroll-view scroll-y="true" style="margin-bottom: 200px;">
				<text>nickName: {{nickName}}</text>
				<text>当前用户信息： {{userData}}</text>
				<button type="primary" open-type="getUserInfo"
					@getuserinfo="getuserinfoCallback">getUserInfo获取用户信息</button>

				<button open-type="share"> share 触发用户转发</button>
				<button open-type="contact" @contact="contactCallback"> contact 打开客服会话</button>
				<button open-type="openSetting"> openSetting 打开授权设置页</button>
			</scroll-view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onReachBottom
	} from '@dcloudio/uni-app'

	const userData = ref()
	const nickName = ref()
	const goto = (url, event) => {
		// uni.navigateTo无法跳转tabBar，如需跳转tabBar需使用uni.switchTab
		uni.switchTab({
			url: url
		});
	}


	const navigateTo = (url, event) => {
		uni.navigateTo({
			url: url
		});
	}


	/**
	 * 获取用户信息回调函数
	 */
	const getuserinfoCallback = (msg) => {
		console.log(msg);
		userData.value = JSON.stringify(msg)
		var detail = msg.detail
		var userInfo = detail.userInfo
		var avatarUrl = userInfo.avatarUrl
		nickName.value = userInfo.nickName
	}

	const contactCallback = (obj) => {
		close(obj)
	}


	onReachBottom(()=>{
		alert('onReachBottom')
	})
</script>

<style lang="scss">
	.container {
		button {
			margin-bottom: 20px;
		}

		text {
			font-size: 29px;
			margin-top: 20px;
		}

		scroll-view {
			height: 600rpx;
			background-color: lightyellow;
			padding: 10px 0;
		}

		.end {
			background-color: chartreuse;
			margin-bottom: 120px !important;
		}

	}


	.btn {
		color: #ffffff;
		background-color: #1AAd19;
		margin-bottom: 20rpx;
		width: 400rpx;
		height: 120rpx;
	}
</style>